home *** CD-ROM | disk | FTP | other *** search
/ Visual Basic Toolbox / Visual Basic Toolbox (P.I.E.)(1996).ISO / toolbar / toolbars / toolbar.txt < prev    next >
Text File  |  1992-02-11  |  8KB  |  147 lines
  1.  
  2. CREATING TOOLBARS IN VISUALBASIC
  3. --------------------------------
  4.  
  5.  
  6. By Stephen Murphy
  7. CIS 70661,2461
  8.  
  9. This is intended for new users of VisualBasic who would like to add some
  10. additional flair to thier programs. Adding a toolbar is a nice touch, and
  11. it is not hard to do. Your finished toolbar can look as good, and be just as
  12. functional as the ones found in Microsoft Excel and other first class
  13. professional programs. Adding a toolbar requires no add-ons to VisualBasic.
  14. You can do it all using VisualBasic and Paintbrush.
  15.  
  16. Creating the bar
  17. ----------------
  18.  
  19. The toolbar itself is a Picture Box with it's background color set to light grey.
  20. It doesn't have to be grey, but this seems to be the standard color. It's border
  21. style should be set to 1-Fixed Single. 
  22.  
  23. Creating the buttons
  24. --------------------
  25.  
  26. Within the bar (picture box) you have just created, create another picture box. That is 
  27. to say, use the mouse to draw the second box inside the first. If you just double-click
  28. on the picture box tool, the second picture box will be created as part of the Form
  29. rather than part of the first picture box. We want the second picture box to be 
  30. contained within the first. You will be able to tell if you succeeded by selecting
  31. the new picture box and trying to move it; you should not be able to move it past
  32. the limits of the first picture box. 
  33.  
  34. Now set it's AutoSize property to True, and it's BorderStyle property to 0 - None.
  35.  
  36.  
  37. Drawing the buttons
  38. -------------------
  39.  
  40. Take a moment to look at the Windows buttons in front of you (on scroll bars, maximize
  41. buttons, etc.) You will notice they have a slight white hi-lite across the left and
  42. top, and a grey shadow across the bottom and right. When a button is pressed, this hi-lite 
  43. and shadow disappear, giving the illusion of movement. This little illusion is simple but
  44. effective. The basic procedure is to create two pictures of each button you want.
  45. One will have the shadow and hi-lite, the other will not. When the user presses the Mouse
  46. button, quickly exhcange pictures, and it will look like the button has been
  47. pressed. To get a better idea, use Paintbrush to view a couple of the buttons from
  48. the ToolDemo program. You will notice they come in pairs: "blank_up.bmp" and "blank_dn.bmp".
  49. One is a bitmap of the button in the up position, the other is a bitmap of the button
  50. in the down position.
  51.  
  52. To view a couple of these bitmaps use Paintbrush. Don't use the Open File commands to view
  53. them because that will give you a very small image that you can't even see. Rather, use
  54. the Edit Paste From command to paste them into an empty sheet. Paste in both the bitmaps
  55. "blank_up.bmp" and "blank_dn.bmp" and position them side by side on the screen so you 
  56. can compare them. Use the View Zoom In command to get a good look at them. Notice the single
  57. line of white across the top and left, and the double line of dark grey across the right
  58. and bottom on the Up button. On the Down button, the white is replaced by black, and
  59. the dark grey shadow is simply removed. This little bit of shading creates the whole effect
  60. of the button being "up" or "down".
  61.  
  62. When you add a picture to your button, the picture portion of the button has to move
  63. a little to the right and down in your second, "down" button. In other words, centre the
  64. picture on the button in the up position, and offset it a little on the down button. Paste 
  65. in a couple of the buttons with pictures on them (such as "writ1_up.bmp" and "writ1_dn.bmp")
  66. and you will see what I mean. The picture has to move over and down a little to complete
  67. the effect.
  68.  
  69. Saving your buttons in Painbrush
  70. --------------------------------
  71.  
  72. Once you have drawn your buttons (you can draw them side by side on the same page) and 
  73. you're ready to try them out, you need to save them as separate bitmaps. To do this, you
  74. will use the Paintbrush Edit Copy To command. First select your square scissors tool. Move
  75. the cross-hairs just outside the top and left of your button. This part has to be exact since
  76. you only want to cut out your button, and not the rest of the background. Tap your cursor
  77. keys to move the cross-hairs right on the top-left corner of your button. You can tell
  78. you are right over the edge of the desired cut-out because the bottom and right cross-hairs
  79. will turn white. Then hold the mouse button down and use the cursor keys to move over and
  80. down to select the rest of your button. Again, we don't want to include any of the background
  81. in our button. You can tell when you are on the edge of your button because the
  82. dotted line of the selection box will turn white. In the case of the bottom and right sides
  83. however, you need to select one pixel beyond the point where the dotted lines turn white. Give
  84. your right and down cursor buttons one tap so the dotted line turns black again. Having
  85. selected your button without any background included, choose the Edit Copy To command
  86. to save the cutout to it's own bitmap file.
  87.  
  88.  
  89. Back in VisualBasic
  90. -------------------
  91.  
  92. We created our second Picture Box and set its AutSize property to True. This means
  93. the box will create its own size to accomodate the bitmap. Now, select its
  94. Picture property, and assign your new "up" button to it. Your button should appear in all
  95. its glory. Now we just have to add the code to activate the button. This is the easiest 
  96. part. If you want a button that stays down after it has been clicked, assign the code
  97. to the Click procedure of the picture box that contains the button. If you want the button
  98. to pop up again after the user releases the mouse button, assign the code to the MouseDown
  99. and MouseUp procedures for the picture box that contains the button. The code for this
  100. second type of button is as follows:
  101.  
  102. In the MouseDown event procedure, change the picture to your "down" button. For example,
  103. Picture2.Picture=LoadPicture("button_dn.bmp")
  104.  
  105. In the MouseUp event procedure, change to the picture of your "up" button...
  106. Picture2.Picture=LoadPicture("button_up.bmp")
  107.  
  108. That's all there is to it! If you want a button that stays down when clicked, place the
  109. picture assignment code in the Picture_Click event procedure along with a flag that
  110. keeps track of whether the button is currently up or down. Each time the button is clicked,
  111. it will go either up or down:
  112.  
  113. If ButtonDownFlag = 0 Then
  114.     Picture2.Picture=LoadPicture("button_dn.bmp")
  115.     ButtonDownFlag = -1
  116.     Exit Sub
  117. ElseIF ButtonDownFlag = -1 Then
  118.     Picture2.Picture=LoadPicture("button_up.bmp")
  119.     ButtonDownFlag = 0
  120.     Exit Sub
  121. End IF
  122.  
  123. Have a look at the code for the demo included here. It will give you an idea of how simple
  124. the process is, yet how effective the result can be. Of course don't forget to add the
  125. code to take the action which the button represents (like changing the screen color, for
  126. example).
  127.  
  128. Conclusion
  129. ----------
  130.  
  131. The process outlined here might seem a little complex, but once you have gone through it
  132. it is quite simple and straight forward. My buttons in the demo are actually an array of
  133. picture boxes which makes them easier to respond to and position. Thier Index property
  134. determines which button was pressed, and a Select Case routine determines which picture
  135. to display where. If you only have a couple of buttons, though, you don't really need an 
  136. array. The Form_Load procedure also does the work of positioning the toolbar on the
  137. form and aligning the buttons inside it.
  138.  
  139. I do not profess to be a great programmer (reading through my code will tell you that!)
  140. but I just wanted to share with you this simple but effective method that doesn't 
  141. require add-ons or additional purchases.
  142.  
  143. As you can see, you are limited only by your imagination. Good luck.
  144.  
  145.  
  146.  
  147.